// 动态渲染
// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
  ]

// 获取btn-list容器
let btnList=document.querySelector('.btn-list')
data.forEach(function(v,i){
    btnList.innerHTML+=`
        <li class="fl btn">${v.count}次</li>
    `
})
// 渲染之后获取按钮
let btnArr=document.querySelectorAll('.btn')
// 初始化
btnArr[0].classList.add('active')
// 获取price标签
let price=document.querySelector('.price')
btnArr.forEach(function(v,i){
    v.onclick=function(){
        // 一刀切
        btnArr.forEach(function(v2,i2){
            // 点击时移出active
            v2.classList.remove('active')
        })
        // 给当前按钮添加上active
        v.classList.add('active')
        price.innerHTML=`
            ¥${data[i].price} 
            <span>(约${data[i].unitPrice}元/次)</span>
        `
        
    }

})


// 内容区域
// 获取选项卡内容
let tabs=document.querySelectorAll('.tab');
let doc=document.getElementsByClassName('doc')[0];
let fault=document.getElementsByClassName('fault')[0];
let stagger=document.getElementsByClassName('stagger')[0];
let tel=document.getElementsByClassName('tel')[0];
//当点击扫码登陆标时  样式修改  页面隐藏显示处理
let tabText =  document.getElementsByClassName('tabText')[0];
//获取内容所有模块
let contents=document.querySelectorAll('.stable');
//联系我们  模块
let contactUs = document.getElementsByClassName('tabcon-item')[0];
console.log(contents)
tabText.onclick=function(v){
    console.log(v.srcElement)
    //发生了点击事件的事件源 获取到其类名
    let clickClassName=v.srcElement.className;
    console.log(clickClassName)
    //遍历循环判断点击对象  给点击对象加active对应样式  
    //给之前有active样式的对象  去掉样式  其他对象 不做任何操作
    tabs.forEach(function(val){
        //第一层判断  判断点击的对象是否已有active对应样式
        //第二层判断 是否是此对象发生的点击事件
        if(clickClassName.indexOf('active')==-1&&val.className==clickClassName){
            v.srcElement.className=clickClassName+' active';
            //判断是否是第一个 如果是第一个
            if(v.srcElement.className.indexOf('doc')>=0){
                displayTab(0);
            }else if(v.srcElement.className.indexOf('fault')>=0){
                displayTab(1);
            }else if(v.srcElement.className.indexOf('stagger')>=0){
                displayTab(2);
            }else if(v.srcElement.className.indexOf('tel')>=0){
                displayTab(-1);
                contactUs.style.display='block';
            }
        }else if(val.className.indexOf('active')>=0){
            //判断未发生点击事件、且有acitve样式的对象  进行样式去除
            val.className=val.className.replace('active','');
        }
    })
   
}
displayTab =function(i){
    contents.forEach(function(v){
        if(i==0){
            v.style.display='block';
        }else if(i==1){
            v.style.display='none';
            contents[1].style.display='block';
            contents[2].style.display='block';
        }else if(i==2){
            v.style.display='none';
            contents[3].style.display='block';
        }else{
            v.style.display='none';
        }
    })
    contactUs.style.display='none';
}
//返回顶部
let toTop=document.querySelector('.toTop');
        
toTop.onclick=function(){
    //将滚动条的高度赋值给变量，递减
    let y=window.scrollY;  

    //设置定时器，不断执行滚动条位置
    let timer=setInterval(function(){
        //y不断减少
        y-=100;   
        //滚动到某个位置
        window.scrollTo(0,y);

        //回到顶部，清楚定时器
        if(y<=0){
            clearInterval(timer);
        }
    },20);
}
window.onscroll=function(){
    console.log(window.scrollY)
    if(window.scrollY>=600){
        toTop.style.display='block';
    }else{
        toTop.style.display='none';
    }
}
